<template>
  <div>
    <div class="editTop">
      <el-button
        icon="el-icon-back"
        circle
        @click="closeEditModal"
        type="primary"
      ></el-button>
      <span>{{ isEdit ? "编辑" : "新建" }}企业企业</span>
    </div>
    <el-form
      label-position="right"
      label-width="120px"
      :model="form"
      :rules="rules"
      ref="ruleForm"
    >
      <el-form-item label="企业简称" prop="name">
        <el-input
          v-model="form.name"
          style="max-width: 480px"
          maxlength="16"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item label="业务方向" prop="summary">
        <el-input
          v-model="form.summary"
          type="textarea"
          maxlength="24"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item label="企业介绍" prop="desc">
        <el-input
          v-model="form.desc"
          type="textarea"
          maxlength="54"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item label="企业标签" prop="tagsIds">
        <el-select v-model="form.tagsIds" filterable multiple placeholder="请选择企业标签">
          <el-option
            v-for="item in biaoqianList"
            :key="item.uuid"
            :label="item.name"
            :value="item.uuid"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="权重" prop="weight">
        <el-input
          v-model.number="form.weight"
          style="width: 120px"
          type="number"
        ></el-input>
      </el-form-item>
      <el-form-item label="封面图" prop="coverUrl">
        <!-- <el-upload
          style="position: relative;top: 10px;height: 120px;"
          :show-file-list="false"
          class="avatar-uploader"
          :action="uploadUrl()"
          accept="image/jpeg,image/jpg,image/png，image/webp"
          list-type="picture-card"
          :data="uploadData"
          :on-success="handleAvatarSuccess('coverUrl')"
        >
          <img v-if="form.coverUrl" :src="form.coverUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload> -->
        <uploadCropper :handleAvatarSuccess="handleAvatarSuccess('coverUrl')" :url="form.coverUrl"/>
        <el-alert
          style="margin-top: 50px"
          show-icon
          title="图片建议分辨率为1：1的整数倍。"
          type="info"
        >
        </el-alert>
      </el-form-item>
    </el-form>
    <div class="footer">
      <el-button @click="closeEditModal">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </div>
</template>
<script>
import { getUploadToken, uploadUrl } from "@/util/upload";

export default {
  props: ["originForm", "isEdit", "closeEditModal", "articleTypeList"],
  data() {
    return {
      // 上传相关
      uploadData: {  },
      uploadUrl,
      biaoqianList: [],
      form: {},
      rules: {
        tagsIds: [{ required: true, type: 'array', message: "请选择标签", trigger: "blur" }],
        name: [{ required: true, message: "请输入企业名称", trigger: "blur" }],
        summary: [
          { required: true, message: "请输入企业业务方向", trigger: "blur" },
        ],
        desc: [{ required: true, message: "请输入企业介绍", trigger: "blur" }],
        coverUrl: [
          { required: true, message: "请上传企业封面", trigger: "blur" },
        ],
      },
    };
  },
  methods: {

    getBiaoqianList() {
      const params = { type: "BQ", status: 1 };
      this.$axios.get("/api/tags.json", { params }).then((response) => {
        this.biaoqianList = response.list;
      });
    },
    handleSubmit() {
      const { originForm, form, isEdit } = this;
      const ajaxType = isEdit ? "put" : "post";
      const url = isEdit
        ? `/api/articles/${originForm.uuid}.json?_method=put`
        : "/api/articles.json";
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.$axios[ajaxType](url, this.form).then((response) => {
            this.$message.success("提交成功");
            this.closeEditModal();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleAvatarSuccess(name, res, file) {
      const fileName = name;
      return (res, file) => {
        const fileObj = this.$utils.judgeLogin(res);;
        this.form[fileName] = fileObj.url;
        this.form = JSON.parse(JSON.stringify(this.form));
      };
    },
    beforeAvatarUpload(file) {
      return getUploadToken(file.name).then((res) => {
        this.uploadData.token = res.ticket;
      });
    },
  },
  created() {
    this.originForm.tagsIds = this.originForm.tags ? this.originForm.tags.map(i => i.uuid) : []
    this.form = JSON.parse(JSON.stringify(this.originForm));
    console.log(111, this.form, this.originForm);
    this.getBiaoqianList()
  },
  mounted() {},
  beforeDestroy() {},
};
</script>
<style lang="scss" scoped>
.editTop {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  margin-left: 20px;
  button {
    margin-right: 10px;
  }
}
.footer {
  display: flex;
  justify-content: center;
}
.divideTop {
  margin-top: 20px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar {
  width: 146px;
  height: 146px;
  display: block;
  overflow: hidden;
}
</style>
